<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <FileList :filedata="filedata" @viewfile="viewfile"></FileList>
    </el-col>

    <el-col :span="16">
      <el-card class="right">
        <article class="markdown-body">
          <component v-if="currMdFile?.name" :is="currMdFile.definitionData" :key="currMdFile?.name" />
          <div v-else>文档正在维护中...</div>
        </article>
      </el-card>
    </el-col>

  </el-row>
</template>

<script setup lang='ts'>
import { shallowRef, reactive, onMounted } from "vue"
import FileList from "@/components/FileList.vue"
import type {MdFile} from "@/model/dataModel.ts"
import 'github-markdown-css'
import {getFileData} from "@/api/fileApi.ts"

//md
let currMdFile = shallowRef({} as MdFile)


const viewfile = (md: MdFile) => {
  currMdFile.value = md
}


let filedata = reactive<Array<MdFile>>([])

//组件加载时，加载文件列表
onMounted(() => {

  //初始化文件列表
  getFileData(filedata)

})


</script>
<style scoped lang="scss"></style>